import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import useStore from '../context/useStore'
import { useHistory } from 'react-router-dom'
import styles from  './detaile.module.scss'
const Detaile: React.FC = () => {

    let [obja, setObja] = useState(Object)
    let location = useLocation()
    let { mine } = useStore()
    let [va, setVa] = useState<string>('');
    let history = useHistory()
    // console.log(location.state)
    useEffect(() => {
        setObja(location.state)
    },[])
    //搜索结果
    useEffect(() => {
        mine.getSearchResult(va)
    }, [va])

    //跳转文章详情
    function goArticle(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let ele = e.target as HTMLElement
            while (ele.tagName !== 'LI') {
                ele = ele.parentElement
            }
            let id = ele.dataset.id
            history.push('/article?id=' + id)
        }
    }

    //点击排行详情
    function goranking(e: React.MouseEvent){
        if (e.target !== e.currentTarget) {
            let ele = e.target as HTMLElement
            while (ele.tagName !== 'LI') {
                ele = ele.parentElement
            }
            let id = ele.dataset.id
            history.push('/ranking?id=' + id)
        }
    }

    return <div >
        <div>排名</div>
        <div className={styles.box} onClick={goranking} >
            {
                mine.searchRankList.map((item) => {
                    return <div><li key={item.id} data-id={item.id} >
                        <img src={item.image} alt="" />
                        <span>{item.name}</span>
                    </li></div>
                })
            }
        </div>

        {/* 文章搜索结果 */}
        <div onClick={goArticle}>
            <div>内容</div>
            <div className={styles.con}>
                {
                    mine.searchArticleList.map((item) => {
                        return <div><li key={item.id} data-id={item.id}>
                            <img src={item.image} alt="" />
                            <p>{item.title}</p>
                            <div className={styles.cona}>
                                <img src={item.avatar} alt="" />
                                <span>{item.nickname}</span>
                                <span>推荐值：{item.score}</span>
                            </div>
                        </li></div>
                    })
                }
            </div>
        </div>
    </div>

}
export default Detaile